//重点指标实时监控
/* eslint-disable */
import React, { Component } from 'react';
import { connect } from 'dva';
import { Tabs, Radio, Select, Button, message, DatePicker, Collapse, Checkbox, Row, Col, Divider, Icon, Drawer, Popconfirm, Dropdown, Menu } from 'antd';
import styles from './Sjdbfx_Qnhb.less';
import MyTable from '../../../components/common/MyTable';
import update from 'immutability-helper';
import request from '../../../utils//request';
import locale from 'antd/lib/date-picker/locale/zh_CN';
import moment from 'moment';
import Container from '../../../components/common/Container';
import PublicService from "../../../services/PublicService";
import MyPagination from '../../../components/common/MyPagination';
import Echarts_ONE from '../echarts/Echarts_ONE';
import Filtrate from '../../../components/common/Filtrate';
import AddModal from '../sub/AddModal';
import config from '../../../config';
const { MonthPicker, RangePicker } = DatePicker;
const { Panel } = Collapse;
const { TabPane } = Tabs;
const { Option } = Select;
class Sjdbfx_Qnhb extends Component {
    constructor(props) {
        super(props);
        this.state = {
            timeType: '',
            zblxValue: '1',
            selectData: [],//指标数组
            modal1Visible: false,
            tableLoading: false,
            dataSource: [],//表格数组
            params: {},
            pageSize: 10,
            pageIndex: 1,
            total: 0,
            addModal: false,
            columns: [],

            yue_columns: [
                {
                    children: [
                        {
                            title: '指标单位',
                            dataIndex: 'name',
                            key: 'name',
                            width: 150,
                            align: 'center',
                        },

                    ],
                    title: '指标单位',
                },
                {
                    children: [
                        {
                            title: 't',
                            dataIndex: 'ljjcl',
                            key: 'ljjcl',
                            width: 150,
                            align: 'center',
                        },

                    ],
                    title: '垃圾进场量',
                }, {
                    dataIndex: 'xbcw',
                    children: [
                        {
                            title: 't',
                            dataIndex: 'ljrll',
                            key: 'ljrll',
                            width: 150,
                            align: 'center',
                        },

                    ],
                    title: '垃圾焚烧量',
                }, {
                    children: [
                        {
                            title: 'KWh',
                            dataIndex: 'fdl',
                            key: 'fdl',
                            width: 150,
                            align: 'center',
                        },

                    ],
                    title: '发电量',
                }, {
                    children: [
                        {
                            title: 'KWh',
                            dataIndex: 'swdl',
                            key: 'swdl',
                            width: 150,
                            align: 'center',
                        },

                    ],
                    title: '上网电量',
                },


                {
                    children: [
                        {
                            title: 'KWh',
                            dataIndex: 'zhcydl_1',
                            key: 'zhcydl_1',
                            width: 200,
                            align: 'center',
                        },

                    ],
                    title: '综合厂用电量',
                },
                {
                    children: [
                        {
                            title: 'KWh',
                            dataIndex: 'zhcydl_2',
                            key: 'zhcydl_2',
                            width: 100,
                            align: 'center',
                        },

                    ],
                    title: '综合厂用电率',
                }

            ],
            yue_text: '',
            nian_text: '',

            yue_dataSource: [],
            nian_dataSource: [],

            jjzb_dataSource: [],
            whnhzb_dataSource: [],
            dcdhzb_dataSource: [],

            jjzb_dataSource_YS: [],
            whnhzb_dataSource_YS: [],
            dcdhzb_dataSource_YS: [],

            jjzb_columns: [
                {
                    children: [
                        {
                            title: '指标单位',
                            dataIndex: 'name',
                            // key: 'name',
                            width: 130,
                            align: 'center',
                        },

                    ],
                    title: '指标名称',
                },
                {
                    children: [
                        {
                            title: 't',
                            dataIndex: 'ljjcl',
                            // key: 'ljjcl',
                            width: 130,
                            align: 'center',
                        },

                    ],
                    title: '垃圾进场量',
                }, {
                    dataIndex: 'xbcw',
                    children: [
                        {
                            title: 't',
                            dataIndex: 'ljrll',
                            // key: 'ljrll',
                            width: 130,
                            align: 'center',
                        },

                    ],
                    title: '垃圾焚烧量',
                }, {
                    children: [
                        {
                            title: 'KWh',
                            dataIndex: 'fdl',
                            // key: 'fdl',
                            width: 130,
                            align: 'center',
                        },

                    ],
                    title: '发电量',
                }, {
                    children: [
                        {
                            title: 'KWh',
                            dataIndex: 'swdl',
                            // key: 'swdl',
                            width: 130,
                            align: 'center',
                        },

                    ],
                    title: '上网电量',
                },
                {
                    children: [
                        {
                            title: 'KWh',
                            dataIndex: 'fscydl',
                            // key: 'fscydl',
                            width: 130,
                            align: 'center',
                        },

                    ],
                    title: '非生产用电量',
                },
                {
                    children: [
                        {
                            title: '%',
                            dataIndex: 'nonProductionRatio',
                            // key: 'nonProductionRatio',
                            width: 130,
                            align: 'center',
                        },

                    ],
                    title: '非生产用电率',
                },
                {
                    children: [
                        {
                            title: 'KWh',
                            dataIndex: 'fdcydl',
                            // key: 'fdcydl',
                            width: 130,
                            align: 'center',
                        },

                    ],
                    title: '发电厂用电量',
                },
                {
                    children: [
                        {
                            title: '%',
                            dataIndex: 'powerStationRatio',
                            // key: 'powerStationRatio',
                            width: 130,
                            align: 'center',
                        },

                    ],
                    title: '发电厂用电率',
                },
                {
                    children: [
                        {
                            title: 'KWh',
                            dataIndex: 'zhcydl',
                            // key: 'zhcydl',
                            width: 130,
                            align: 'center',
                        },

                    ],
                    title: '综合厂用电量',
                },
                {
                    children: [
                        {
                            title: '%',
                            dataIndex: 'synthesizeRatio',
                            // key: 'synthesizeRatio',
                            width: 130,
                            align: 'center',
                        },

                    ],
                    title: '综合厂用电率',
                },
                {
                    children: [
                        {
                            title: 'KWh',
                            dataIndex: 'sdl',
                            // key: 'sdl',
                            width: 100,
                            align: 'center',
                        },

                    ],
                    title: '受电量',
                },
            ],
            whnhzb_columns: [
                {
                    children: [
                        {
                            title: '指标单位',
                            dataIndex: 'name',
                            // key: 'name',
                            width: 130,
                            align: 'center',
                        },

                    ],
                    title: '指标名称',
                },
                {
                    children: [
                        {
                            title: 't',
                            dataIndex: 'ljjcl',
                            // key: 'ljjcl',
                            width: 130,
                            align: 'center',
                        },

                    ],
                    title: '垃圾进厂量',
                },
                {
                    children: [
                        {
                            title: 't',
                            dataIndex: 'ljrll',
                            // key: 'ljrll',
                            width: 130,
                            align: 'center',
                        },

                    ],
                    title: '垃圾焚烧量',
                },
                {
                    children: [
                        {
                            title: 't',
                            dataIndex: 'rysyl',
                            // key: 'rysyl',
                            width: 130,
                            align: 'center',
                        },

                    ],
                    title: '燃油使用量',
                }, {
                    dataIndex: 'xbcw',
                    children: [
                        {
                            title: 't',
                            dataIndex: 'szysyl',
                            // key: 'szysyl',
                            width: 130,
                            align: 'center',
                        },

                    ],
                    title: '水资源使用量',
                }, {
                    children: [
                        {
                            title: 't',
                            dataIndex: 'qyhgsyl',
                            // key: 'qyhgsyl',
                            width: 130,
                            align: 'center',
                        },

                    ],
                    title: '氢氧化钙使用量',
                }, {
                    children: [
                        {
                            title: 't',
                            dataIndex: 'hxtsyl',
                            // key: 'hxtsyl',
                            width: 130,
                            align: 'center',
                        },

                    ],
                    title: '活性炭使用量',
                },
                {
                    children: [
                        {
                            title: 't',
                            dataIndex: 'zhjsyl',
                            // key: 'zhjsyl',
                            width: 130,
                            align: 'center',
                        },

                    ],
                    title: '蛰合剂使用量',
                },
                {
                    children: [
                        {
                            title: 't',
                            dataIndex: 'lzcl',
                            // key: 'lzcl',
                            width: 130,
                            align: 'center',
                        },

                    ],
                    title: '炉渣产量',
                },
                {
                    children: [
                        {
                            title: 't',
                            dataIndex: 'fhcl',
                            // key: 'fhcl',
                            width: 130,
                            align: 'center',
                        },

                    ],
                    title: '飞灰产量',
                },
            ],
            dcdhzb_columns: [
                {
                    children: [
                        {
                            title: '指标单位',
                            dataIndex: 'name',
                            // key: 'name',
                            width: 130,
                            align: 'center',
                        },

                    ],
                    title: '指标名称',
                },
                {
                    children: [
                        {
                            title: 'KWh/t',
                            dataIndex: 'ljfdl',
                            // key: 'ljfdl',
                            width: 130,
                            align: 'center',
                        },

                    ],
                    title: '吨垃圾发电量',
                }, {
                    dataIndex: 'xbcw',
                    children: [
                        {
                            title: 't/t',
                            dataIndex: 'ljhyl',
                            // key: 'ljhyl',
                            width: 130,
                            align: 'center',
                        },

                    ],
                    title: '吨垃圾耗油量',
                },
                {
                    children: [
                        {
                            title: 'KWh/t',
                            dataIndex: 'ljhdl',
                            // key: 'ljhdl',
                            width: 130,
                            align: 'center',
                        },

                    ],
                    title: '吨垃圾耗电量',
                },
                {
                    children: [
                        {
                            title: 'KWh/t',
                            dataIndex: 'ljhsl',
                            // key: 'ljhsl',
                            width: 130,
                            align: 'center',
                        },

                    ],
                    title: '吨垃圾耗水量',
                },
                {
                    children: [
                        {
                            title: 't/t',
                            dataIndex: 'ljhxthl',
                            // key: 'ljhxthl',
                            width: 130,
                            align: 'center',
                        },

                    ],
                    title: '吨垃圾活性炭耗量',
                },
                {
                    children: [
                        {
                            title: 'KWh/t',
                            dataIndex: 'ljqyhghl',
                            // key: 'ljqyhghl',
                            width: 130,
                            align: 'center',
                        },

                    ],
                    title: '吨垃圾氢氧化钙耗量',
                },
                {
                    children: [
                        {
                            title: 'KWh/t',
                            dataIndex: 'ljzhjhl',
                            // key: 'ljzhjhl',
                            width: 130,
                            align: 'center',
                        },

                    ],
                    title: '吨垃圾蛰合剂耗量',
                },
                {
                    children: [
                        {
                            title: 't/t',
                            dataIndex: 'ljlzcl',
                            // key: 'ljlzcl',
                            width: 130,
                            align: 'center',
                        },

                    ],
                    title: '吨垃圾炉渣量',
                },
                {
                    children: [
                        {
                            title: 't/t',
                            dataIndex: 'ljfhcl',
                            // key: 'ljfhcl',
                            width: 130,
                            align: 'center',
                        },

                    ],
                    title: '吨垃圾飞灰量',
                },

            ],


            options: [],
            startValue: null,
            endValue: null,
            endOpen: false,
            CheckboxData: [],
            headerFlag: true,
            Radiovalue: 1,//单选值
            statistics: 1,
            monthStr: moment(),
            Groupvalue: 1,
            zblx: [],
            zblxData: [],
            series: [],
            time: []
        }



    }
    componentDidMount() {
        this.getProductionTotal()//计划进度指标


    }

    getProductionTotal = () => {
        const { monthStr } = this.state
        let yearMonth = moment(monthStr).format('YYYY-MM')
        request({
            url: `/sx-client/sx/productionplan/getProductionTotal?companyId=402880e5703d658801703d68a70e0000&yearMonth=${yearMonth}`,
            method: 'GET',
        }).then(data => {
            if (data.rc === 0) {
                this.setState({
                    yue_dataSource: data.ret.monthData,
                    nian_dataSource: data.ret.yearData,
                    yue_text: data.ret.tjzq_month,
                    nian_text: data.ret.tjzq_year
                })
            }

        })
    }
    onSubmit = (page, size) => {//查询

    }



    //自动日期开始
    //日期选择器的所有事件,包含了自定义时间选取范围(开始)
    disabledStartDate = (startValue) => {
        const endValue = this.state.endValue;

        if (!startValue || !endValue) {
            return false;
        }

        return startValue.valueOf() > endValue.valueOf();
    }

    disabledEndDate = (endValue) => {
        const startValue = this.state.startValue;
        if (!endValue || !startValue) {
            return false;
        }

        let one = startValue.valueOf() + 1000 * 60 * 60 * 4800;

        let noDate = Number(new Date())


        return endValue.valueOf() <= startValue.valueOf() || endValue.valueOf() >= one || endValue.valueOf() >= noDate;
    }

    onStartChange = (value) => {
        // console.log(value.valueOf())
        if (value.valueOf() > moment().valueOf()) {
            message.warning('已超出当前时间!');
            return
        }
        this.onChange('startValue', value);

    }

    handleStartOpenChange = (open) => {
        if (!open) {
            this.setState({ endOpen: true });
        }
    }

    onEndChange = (value) => {
        this.onChange('endValue', value);
    }

    handleEndOpenChange = (open) => {
        this.setState({ endOpen: open });
    }

    onChange = (field, value) => {
        this.setState({
            [field]: value,
        });
    }
    //自动日期结束

    onChangeCheckbox = (checkedValues) => {
        console.log('checked = ', checkedValues);
        this.setState({
            CheckboxData: checkedValues
        })
    }

    CollapseonChange = () => {
        console.log(123)
        this.setState({
            headerFlag: !this.state.headerFlag
        })
    }

    onChangeRadio = e => {
        console.log('radio checked', e.target.value);
        this.setState({
            Groupvalue: e.target.value,
        });


    };
    // 分页
    onChangePage = (page, size) => {//分页
        this.setTimeAndSearch(this.state.params, page, size);
        this.setState({
            pageSize: size,
            pageIndex: page,
        })
    };

    onChangePage1 = (page, size) => {//改变最大条数
        this.setTimeAndSearch(this.state.params, 1, size);
        this.setState({
            pageSize: size,
            pageIndex: 1
        })
    };

    setTimeAndSearch = (val, pageIndex, row) => {

        console.log(val, pageIndex, row)
        val.page = pageIndex;
        val.rows = row;

        request({
            url: '/sx-client/sx/indicator/KpiPagingQuery',
            method: 'POST',
            data: val
        }).then(data => {
            if (data.rc === 0) {
                this.setState({
                    dataSource: data.ret.items,
                    total: data.ret.count,
                })
            }
        })

    };

    addItem = () => {
        this.setState({
            visible: true,
        });
    }



    onClose = () => {
        this.setState({
            visible: false,
        });
    }

    handleChange = (value) => {
        console.log(`selected ${value}`);
        this.setState({
            selectData: value
        })
    }

    zblxhandleChange = (value) => {
        this.setState({
            zblx: value
        }, () => {
            this.getIndexSelection(value)
        })


    }
    getIndexSelection = (kpiType) => {
        request({
            url: `/sx-client/sx/productionplan/getCodes?type=${kpiType}`,
            method: 'GET',
        }).then(data => {
            if (data.rc === 0) {
                this.setState({
                    zblxData: data.ret
                })
            }

        })

    }

    onChangeCheckbox = (checkedValues) => {
        console.log('checked = ', checkedValues);
        this.setState({
            selectData: checkedValues
        })
    }

    onChangestatistics = (e) => {
        this.setState({
            statistics: e.target.value,
        });

        if (e.target.value == 1) {
            //日
            if (this.state.zblxValue == 2) {
                this.setState({
                    dataSource: this.state.jjzb_dataSource
                })
            }

            if (this.state.zblxValue == 3) {
                this.setState({
                    dataSource: this.state.whnhzb_dataSource
                })
            }

            if (this.state.zblxValue == 4) {
                this.setState({
                    dataSource: this.state.dcdhzb_dataSource
                })
            }

        } else {
            //原始
            if (this.state.zblxValue == 2) {
                this.setState({
                    dataSource: this.state.jjzb_dataSource_YS
                })
            }

            if (this.state.zblxValue == 3) {
                this.setState({
                    dataSource: this.state.whnhzb_dataSource_YS
                })
            }

            if (this.state.zblxValue == 4) {
                this.setState({
                    dataSource: this.state.dcdhzb_dataSource_YS
                })
            }
        }
    }

    confirm = () => {
        let isAll = true
        window.location.href = '/sx-client/sx/indicator/exportKpiIndicator?' + PublicService.paramSerializer({
            ...this.state.params,
            isAll
        })
    }

    cancel = () => {
        let isAll = false
        window.location.href = '/sx-client/sx/indicator/exportKpiIndicator?' + PublicService.paramSerializer({
            ...this.state.params,
            isAll
        })
    }

    onMonthPicker = (data) => {
        this.setState({
            monthStr: data
        })
    }

    getTrendViewData = () => {


        if (!this.state.endValue) {
            message.warning('请完善查询参数!')
            return
        }

        if (this.state.zblxData.length < 1) {
            message.warning('请完善查询参数!')
            return
        }



        request({
            url: `/sx-client/sx/productionplan/getQuxianshitu?code=${this.state.selectData}&endTime=${moment(this.state.endValue).format('YYYY-MM')}&startTime=${moment(this.state.startValue).format('YYYY-MM-DD HH:mm:ss')}&type=${this.state.zblx}`,
            method: 'GET',
        }).then(data => {
            if (data.rc === 0) {
                let arr = [
                    {
                        name: '趋势值',
                        type: 'line',
                        yAxisIndex: 0,
                        smooth: true,
                        showSymbol: false,//控制节点显示
                        data: data.ret.yAxis1
                    },
                    {
                        name: '趋势值',
                        type: 'bar',
                        yAxisIndex: 1,
                        smooth: true,
                        showSymbol: false,//控制节点显示
                        data: data.ret.yAxis2
                    }
                ]

                this.setState({
                    series: arr,
                    time: data.ret.xAxis
                })
            }
        })


    }

    getjhjjzb = () => {
        let width = document.body.clientWidth;
        const height = document.body.clientHeight;
        let containerHeight = '75vh';
        let tableHeight = 230;
        // console.log(width)
        if (width < 1900) {
            tableHeight = 270;
            containerHeight = '63vh';
        }

        const { zblxData, options, nian_dataSource, yue_dataSource, modalTitle, dataSource, tableLoading, pageSize, pageIndex, total, startValue, endValue, endOpen, yue_columns } = this.state
        return (
            <Container
                style={{ height: containerHeight, position: "relative", overflow: 'auto' }}
                header={true}
            >
                <div className={styles.title}>
                    <div style={{ display: 'flex', alignItems: 'center' }}><span className={styles.ciler}></span> 月度</div>
                    <div>统计周期 : {this.state.yue_text}

                        <Popconfirm
                            title="导出全部?"
                            onConfirm={this.confirm}
                            onCancel={this.cancel}
                            okText="确定"
                            cancelText="取消"
                        >
                            <Button size='small' style={{ marginLeft: 10 }} type="primary" >导出</Button>
                        </Popconfirm>
                    </div>

                </div>
                <MyTable
                    columns={yue_columns}
                    scroll={{ y: height - tableHeight }}
                    dataSource={PublicService.transformArrayData(yue_dataSource, true, true, pageIndex, pageSize)}
                    pagination={false}
                />

                <div className={styles.title}>
                    <div style={{ display: 'flex', alignItems: 'center' }}><span className={styles.ciler}></span> 年度</div>
                    <div>统计周期 : {this.state.nian_text}
                        <Button size='small' style={{ marginLeft: 10, opacity: 0 }} type="primary" >导出</Button>
                    </div>

                </div>
                <MyTable
                    columns={yue_columns}
                    scroll={{ y: height - tableHeight }}
                    dataSource={PublicService.transformArrayData(nian_dataSource, true, true, pageIndex, pageSize)}
                    pagination={false}
                />

            </Container>

        )
    }


    getjjzb = () => {
        let width = document.body.clientWidth;
        const height = document.body.clientHeight;
        let containerHeight = '75vh';
        let tableHeight = 230;
        // console.log(width)
        if (width < 1900) {
            tableHeight = 270;
            containerHeight = '63vh';
        }
        const menu = (
            <Menu onClick={this.handleMenuClick}>
                <Menu.Item key="1">日度</Menu.Item>
                <Menu.Item key="2">月度</Menu.Item>
                <Menu.Item key="3">季度</Menu.Item>
                <Menu.Item key="4">年度</Menu.Item>
            </Menu>
        );

        const { zblxData, options, footerShow, modalBtnLoading, modalTitle, dataSource, tableLoading, pageSize, pageIndex, total, startValue, endValue, endOpen, columns } = this.state
        return (
            <Container
                style={{ height: containerHeight, position: "relative", overflow: 'auto' }}
            // header={true}
            >
                <div style={{ width: 400, height: 40, position: 'absolute', left: 50, top: 0, display: 'flex', alignItems: 'center' }}>
                    <Radio.Group onChange={this.onChangestatistics} value={this.state.statistics}>
                        <Radio value={1}>精确到日</Radio>
                        <Radio value={2}>原始数据</Radio>
                    </Radio.Group>
                    <Dropdown overlay={menu}>
                        <Button>
                            新增 <Icon type="down" />
                        </Button>
                    </Dropdown>
                </div>

                <MyTable
                    columns={columns}
                    scroll={{ y: height - tableHeight }}
                    dataSource={PublicService.transformArrayData(dataSource, true, true, pageIndex, pageSize)}
                    pagination={false}
                />

            </Container>

        )
    }

    handleMenuClick = (e) => {
        console.log(e)
        let moddleArr = []
        let nianArr = []
        let nian = Number(moment().format('YYYY'))
        for (var i = 2000; i < nian + 1; i++) {
            nianArr.push({
                value: i,
                text: i
            })
        }

        this.setState({
            timeType: e.key
        })


        if (this.state.zblxValue == 2) {
            //经济指标
            moddleArr = [
                {
                    type: 'input',
                    label: "垃圾进场量",
                    paramName: "ljjcl",
                    key: "ljjcl",
                    rules: [{ ...config.reg.required }],
                    style: { width: 270 },
                    // span: 24
                },
                {
                    type: 'input',
                    label: "垃圾焚烧量",
                    paramName: "ljrll",
                    key: "ljrll",
                    rules: [{ ...config.reg.required }],
                    style: { width: 270 },
                    // span: 24
                },
                {
                    type: 'input',
                    label: "发电量",
                    paramName: "fdl",
                    key: "fdl",
                    rules: [{ ...config.reg.required }],
                    style: { width: 270 },
                    // span: 24
                },
                {
                    type: 'input',
                    label: "上网电量",
                    paramName: "swdl",
                    key: "swdl",
                    rules: [{ ...config.reg.required }],
                    style: { width: 270 },
                    // span: 24
                },
                {
                    type: 'input',
                    label: "非生产用电量",
                    paramName: "fscydl",
                    key: "fscydl",
                    rules: [{ ...config.reg.required }],
                    style: { width: 270 },
                    // span: 24
                },
                {
                    type: 'input',
                    label: "发电厂用电量",
                    paramName: "fdcydl",
                    key: "fdcydl",
                    rules: [{ ...config.reg.required }],
                    style: { width: 270 },
                    // span: 24
                },
                {
                    type: 'input',
                    label: "综合厂用电量",
                    paramName: "zhcydl",
                    key: "zhcydl",
                    rules: [{ ...config.reg.required }],
                    style: { width: 270 },
                    // span: 24
                },
                {
                    type: 'input',
                    label: "受电量",
                    paramName: "sdl",
                    key: "sdl",
                    rules: [{ ...config.reg.required }],
                    style: { width: 270 },
                    // span: 24
                },
            ]

            if (e.key == 1) {
                moddleArr.push(
                    {
                        type: 'datePicker',
                        label: "日期",
                        paramName: "time",
                        key: "time",
                        rules: [{ ...config.reg.required }],
                        style: { width: 270 },
                        initialValue: null
                        // span: 24
                    },
                )
                //日度
                this.setState({
                    moddleArr: moddleArr,
                    addModal: true,
                    footerShow: true,
                    modalTitle: '新增',
                })
            }

            if (e.key == 2) {
                moddleArr.push(
                    {
                        type: 'monthPicker',
                        label: "日期",
                        paramName: "time",
                        key: "time",
                        rules: [{ ...config.reg.required }],
                        style: { width: 270 },
                        initialValue: null
                        // span: 24
                    },
                )
                //月度
                this.setState({
                    moddleArr: moddleArr,
                    addModal: true,
                    footerShow: true,
                    modalTitle: '新增',
                })
            }

            if (e.key == 3) {
                moddleArr.push(
                    {
                        type: 'select',
                        label: "年份",
                        paramName: "nian",
                        key: "nian",
                        rules: [{ ...config.reg.required }],
                        style: { width: 270 },
                        options: [
                            ...nianArr
                        ]
                    },
                    {
                        type: 'select',
                        label: "季度",
                        paramName: "jidu",
                        key: "jidu",
                        rules: [{ ...config.reg.required }],
                        style: { width: 270 },
                        options: [
                            { value: '1', text: '第一季度' },
                            { value: '2', text: '第二季度' },
                            { value: '3', text: '第三季度' },
                            { value: '4', text: '第四季度' }
                        ]
                    },
                )
                //季度
                this.setState({
                    moddleArr: moddleArr,
                    addModal: true,
                    footerShow: true,
                    modalTitle: '新增',
                })
            }

            if (e.key == 4) {
                moddleArr.push(
                    {
                        type: 'select',
                        label: "年份",
                        paramName: "nian",
                        key: "nian",
                        rules: [{ ...config.reg.required }],
                        style: { width: 270 },
                        options: [
                            ...nianArr
                        ]
                    },
                )
                //季度
                this.setState({
                    moddleArr: moddleArr,
                    addModal: true,
                    footerShow: true,
                    modalTitle: '新增',
                })
            }

        }

        if (this.state.zblxValue == 3) {
            //经济指标
            moddleArr = [
                {
                    type: 'input',
                    label: "垃圾进场量",
                    paramName: "ljjcl",
                    key: "ljjcl",
                    rules: [{ ...config.reg.required }],
                    style: { width: 270 },
                    // span: 24
                },
                {
                    type: 'input',
                    label: "垃圾焚烧量",
                    paramName: "ljrll",
                    key: "ljrll",
                    rules: [{ ...config.reg.required }],
                    style: { width: 270 },
                    // span: 24
                },
                {
                    type: 'input',
                    label: "燃油使用量",
                    paramName: "rysyl",
                    key: "rysyl",
                    rules: [{ ...config.reg.required }],
                    style: { width: 270 },
                    // span: 24
                },
                {
                    type: 'input',
                    label: "水资源使用量",
                    paramName: "szysyl",
                    key: "szysyl",
                    rules: [{ ...config.reg.required }],
                    style: { width: 270 },
                    // span: 24
                },
                {
                    type: 'input',
                    label: "氢氧化钙使用量",
                    paramName: "qyhgsyl",
                    key: "qyhgsyl",
                    rules: [{ ...config.reg.required }],
                    style: { width: 270 },
                    // span: 24
                },
                {
                    type: 'input',
                    label: "活性炭使用量",
                    paramName: "hxtsyl",
                    key: "hxtsyl",
                    rules: [{ ...config.reg.required }],
                    style: { width: 270 },
                    // span: 24
                },
                {
                    type: 'input',
                    label: "蛰合剂使用量",
                    paramName: "zhjsyl",
                    key: "zhjsyl",
                    rules: [{ ...config.reg.required }],
                    style: { width: 270 },
                    // span: 24
                },
                {
                    type: 'input',
                    label: "炉渣产量",
                    paramName: "lzcl",
                    key: "lzcl",
                    rules: [{ ...config.reg.required }],
                    style: { width: 270 },
                    // span: 24
                },
                {
                    type: 'input',
                    label: "飞灰产量",
                    paramName: "fhcl",
                    key: "fhcl",
                    rules: [{ ...config.reg.required }],
                    style: { width: 270 },
                    // span: 24
                },
            ]

            if (e.key == 1) {
                moddleArr.push(
                    {
                        type: 'datePicker',
                        label: "日期",
                        paramName: "time",
                        key: "time",
                        rules: [{ ...config.reg.required }],
                        style: { width: 270 },
                        initialValue: null
                        // span: 24
                    },
                )
                //日度
                this.setState({
                    moddleArr: moddleArr,
                    addModal: true,
                    footerShow: true,
                    modalTitle: '新增',
                })
            }

            if (e.key == 2) {
                moddleArr.push(
                    {
                        type: 'monthPicker',
                        label: "日期",
                        paramName: "time",
                        key: "time",
                        rules: [{ ...config.reg.required }],
                        style: { width: 270 },
                        initialValue: null
                        // span: 24
                    },
                )
                //月度
                this.setState({
                    moddleArr: moddleArr,
                    addModal: true,
                    footerShow: true,
                    modalTitle: '新增',
                })
            }

            if (e.key == 3) {
                moddleArr.push(
                    {
                        type: 'select',
                        label: "年份",
                        paramName: "nian",
                        key: "nian",
                        rules: [{ ...config.reg.required }],
                        style: { width: 270 },
                        options: [
                            ...nianArr
                        ]
                    },
                    {
                        type: 'select',
                        label: "季度",
                        paramName: "jidu",
                        key: "jidu",
                        rules: [{ ...config.reg.required }],
                        style: { width: 270 },
                        options: [
                            { value: '1', text: '第一季度' },
                            { value: '2', text: '第二季度' },
                            { value: '3', text: '第三季度' },
                            { value: '4', text: '第四季度' }
                        ]
                    },
                )
                //季度
                this.setState({
                    moddleArr: moddleArr,
                    addModal: true,
                    footerShow: true,
                    modalTitle: '新增',
                })
            }

            if (e.key == 4) {
                moddleArr.push(
                    {
                        type: 'select',
                        label: "年份",
                        paramName: "nian",
                        key: "nian",
                        rules: [{ ...config.reg.required }],
                        style: { width: 270 },
                        options: [
                            ...nianArr
                        ]
                    },
                )
                //季度
                this.setState({
                    moddleArr: moddleArr,
                    addModal: true,
                    footerShow: true,
                    modalTitle: '新增',
                })
            }

        }

        if (this.state.zblxValue == 4) {
            //经济指标
            moddleArr = [
                {
                    type: 'input',
                    label: "吨垃圾发电量",
                    paramName: "ljfdl",
                    key: "ljfdl",
                    rules: [{ ...config.reg.required }],
                    style: { width: 270 },
                    // span: 24
                },
                {
                    type: 'input',
                    label: "吨垃圾耗油量",
                    paramName: "ljhyl",
                    key: "ljhyl",
                    rules: [{ ...config.reg.required }],
                    style: { width: 270 },
                    // span: 24
                },
                {
                    type: 'input',
                    label: "吨垃圾耗电量",
                    paramName: "ljhdl",
                    key: "ljhdl",
                    rules: [{ ...config.reg.required }],
                    style: { width: 270 },
                    // span: 24
                },
                {
                    type: 'input',
                    label: "吨垃圾耗水量",
                    paramName: "ljhsl",
                    key: "ljhsl",
                    rules: [{ ...config.reg.required }],
                    style: { width: 270 },
                    // span: 24
                },
                {
                    type: 'input',
                    label: "吨垃圾活性炭耗量",
                    paramName: "ljhxthl",
                    key: "ljhxthl",
                    rules: [{ ...config.reg.required }],
                    style: { width: 270 },
                    // span: 24
                },
                {
                    type: 'input',
                    label: "吨垃圾氢氧化钙耗量",
                    paramName: "ljqyhghl",
                    key: "ljqyhghl",
                    rules: [{ ...config.reg.required }],
                    style: { width: 270 },
                    // span: 24
                },
                {
                    type: 'input',
                    label: "吨垃圾蛰合剂耗量",
                    paramName: "ljzhjhl",
                    key: "ljzhjhl",
                    rules: [{ ...config.reg.required }],
                    style: { width: 270 },
                    // span: 24
                },
                {
                    type: 'input',
                    label: "吨垃圾炉渣量",
                    paramName: "ljlzcl",
                    key: "ljlzcl",
                    rules: [{ ...config.reg.required }],
                    style: { width: 270 },
                    // span: 24
                },
                {
                    type: 'input',
                    label: "吨垃圾飞灰量",
                    paramName: "ljfhcl",
                    key: "ljfhcl",
                    rules: [{ ...config.reg.required }],
                    style: { width: 270 },
                    // span: 24
                },
            ]

            if (e.key == 1) {
                moddleArr.push(
                    {
                        type: 'datePicker',
                        label: "日期",
                        paramName: "time",
                        key: "time",
                        rules: [{ ...config.reg.required }],
                        style: { width: 270 },
                        initialValue: null
                        // span: 24
                    },
                )
                //日度
                this.setState({
                    moddleArr: moddleArr,
                    addModal: true,
                    footerShow: true,
                    modalTitle: '新增',
                })
            }

            if (e.key == 2) {
                moddleArr.push(
                    {
                        type: 'monthPicker',
                        label: "日期",
                        paramName: "time",
                        key: "time",
                        rules: [{ ...config.reg.required }],
                        style: { width: 270 },
                        initialValue: null
                        // span: 24
                    },
                )
                //月度
                this.setState({
                    moddleArr: moddleArr,
                    addModal: true,
                    footerShow: true,
                    modalTitle: '新增',
                })
            }

            if (e.key == 3) {
                moddleArr.push(
                    {
                        type: 'select',
                        label: "年份",
                        paramName: "nian",
                        key: "nian",
                        rules: [{ ...config.reg.required }],
                        style: { width: 270 },
                        options: [
                            ...nianArr
                        ]
                    },
                    {
                        type: 'select',
                        label: "季度",
                        paramName: "jidu",
                        key: "jidu",
                        rules: [{ ...config.reg.required }],
                        style: { width: 270 },
                        options: [
                            { value: '1', text: '第一季度' },
                            { value: '2', text: '第二季度' },
                            { value: '3', text: '第三季度' },
                            { value: '4', text: '第四季度' }
                        ]
                    },
                )
                //季度
                this.setState({
                    moddleArr: moddleArr,
                    addModal: true,
                    footerShow: true,
                    modalTitle: '新增',
                })
            }

            if (e.key == 4) {
                moddleArr.push(
                    {
                        type: 'select',
                        label: "年份",
                        paramName: "nian",
                        key: "nian",
                        rules: [{ ...config.reg.required }],
                        style: { width: 270 },
                        options: [
                            ...nianArr
                        ]
                    },
                )
                //季度
                this.setState({
                    moddleArr: moddleArr,
                    addModal: true,
                    footerShow: true,
                    modalTitle: '新增',
                })
            }

        }

    }


    onzblx = (v) => {
        this.setState({
            zblxValue: v,
            statistics: 1
        })
        if (v == 2) {
            //经济指标
            this.setState({
                columns: this.state.jjzb_columns,
                dataSource: this.state.jjzb_dataSource
            })
        }

        if (v == 3) {
            //经济指标
            this.setState({
                columns: this.state.whnhzb_columns,
                dataSource: this.state.whnhzb_dataSource
            })
        }

        if (v == 4) {
            //经济指标
            this.setState({
                columns: this.state.dcdhzb_columns,
                dataSource: this.state.dcdhzb_dataSource
            })
        }
    }

    // modal保存
    ModalOk = (val) => {
        let params = val

        if (this.state.timeType == 1) {
            //日度
            params.year = moment(val.time).format('YYYY')
            params.time = moment(val.time).format('YYYY-MM-DD')
            params.type = 1

        }

        if (this.state.timeType == 2) {
            //月度
            params.year = moment(val.time).format('YYYY')
            params.time = moment(val.time).format('YYYY-MM')
            params.type = 2

        }

        if (this.state.timeType == 3) {
            //季度

            params.year = val.nian
            params.time = val.jidu
            params.type = 3
        }

        if (this.state.timeType == 4) {
            //年度
            params.year = val.nian
            params.type = 4

        }

        if (this.state.zblxValue == 2) {
            params.data1 = this.state.jjzb_dataSource_YS
            params.data2 = this.state.jjzb_dataSource
            request({
                url: `/sx-client/sx/productionplan/getDuibiao1`,
                method: 'POST',
                data: params
            }).then(data => {
                if (data.rc === 0) {
                    message.success('新增成功')
                    this.setState({
                        addModal: false,
                        jjzb_dataSource: data.ret.data2,
                        jjzb_dataSource_YS: data.ret.data1,
                        dataSource: data.ret.data2
                    })
                } else {
                    message.warning(data.err)
                }

            })
        }

        if (this.state.zblxValue == 3) {
            params.data1 = this.state.whnhzb_dataSource_YS
            params.data2 = this.state.whnhzb_dataSource
            request({
                url: `/sx-client/sx/productionplan/getDuibiao2`,
                method: 'POST',
                data: params
            }).then(data => {
                if (data.rc === 0) {
                    message.success('新增成功')
                    this.setState({
                        addModal: false,
                        whnhzb_dataSource: data.ret.data2,
                        whnhzb_dataSource_YS: data.ret.data1,
                        dataSource: data.ret.data2
                    })
                } else {
                    message.warning(data.err)
                }

            })
        }

        if (this.state.zblxValue == 4) {
            params.data1 = this.state.dcdhzb_dataSource_YS
            params.data2 = this.state.dcdhzb_dataSource
            request({
                url: `/sx-client/sx/productionplan/getDuibiao3`,
                method: 'POST',
                data: params
            }).then(data => {
                if (data.rc === 0) {
                    message.success('新增成功')
                    this.setState({
                        addModal: false,
                        dcdhzb_dataSource: data.ret.data2,
                        dcdhzb_dataSource_YS: data.ret.data1,
                        dataSource: data.ret.data2
                    })
                } else {
                    message.warning(data.err)
                }

            })
        }



    }

    // 取消保存
    ModalCancel = (type) => {
        let t = this;
        t.setState({
            [type]: false,
            modalBtnLoading: false
        })
    };
    render() {
        let width = document.body.clientWidth;
        const height = document.body.clientHeight;
        let containerHeight = '75vh';
        let tableHeight = 230;
        // console.log(width)
        if (width < 1900) {
            tableHeight = 270;
            containerHeight = '63vh';
        }





        const { addModal, zblxData, options, footerShow, modalBtnLoading, modalTitle, dataSource, tableLoading, pageSize, pageIndex, total, startValue, endValue, endOpen, columns } = this.state
        return (

            <div className={styles.warp}>
                {
                    addModal &&
                    <AddModal
                        // dataTypes={dataTypes}
                        width={600}
                        visible={addModal}
                        title={modalTitle}
                        // modalBtnLoading={modalBtnLoading}
                        footerShow={footerShow}
                        onModalSave={this.ModalOk.bind(this)}
                        onCancel={this.ModalCancel.bind(this, 'addModal')}
                        // selectedChange={this.selectedChange}
                        moddleArr={this.state.moddleArr}

                    />
                }
                <Drawer
                    title="选取指标"
                    placement="right"
                    closable={false}
                    onClose={this.onClose}
                    width={800}
                    visible={this.state.visible}
                >
                    <Checkbox.Group style={{ width: '100%' }} onChange={this.onChangeCheckbox} value={this.state.selectData}>
                        <Row>
                            {
                                zblxData.map((item) => {
                                    return (
                                        <Col span={8}>
                                            <Checkbox value={item.value}>{item.label}</Checkbox>
                                        </Col>
                                    )
                                })
                            }

                        </Row>
                    </Checkbox.Group>
                </Drawer>
                <Tabs defaultActiveKey="1" className={styles.Tabs}>
                    <TabPane tab="总览视图" key="1">

                        <div className={styles.topBox}>
                            <div style={{ width: 350 }}>
                                <span style={{ marginLeft: 10 }}>对标指标类型：</span>
                                <Select size='small' value={this.state.zblxValue} style={{ width: 220 }} onChange={this.onzblx}>
                                    <Option value='1'>计划进度指标</Option>
                                    <Option value='2'>经济指标</Option>
                                    <Option value='3'>物耗能耗指标</Option>
                                    <Option value='4'>单产单耗指标</Option>
                                </Select>
                            </div>




                            <div style={{ width: 400 }}>
                                <span style={{ marginLeft: 10 }}>时间选取：</span>
                                <MonthPicker format={'YYYY/MM'} size="small" value={this.state.monthStr} onChange={this.onMonthPicker} />
                            </div>





                            <div style={{ width: 200 }}>
                                <Button size='small' style={{ marginLeft: 10 }} type="primary" onClick={this.onSubmit}>查询</Button>
                                <Button size='small' style={{ marginLeft: 10 }} >重置</Button>
                            </div>

                        </div>
                        {
                            this.state.zblxValue == 1 ? this.getjhjjzb() : this.getjjzb()
                        }




                    </TabPane>
                    <TabPane tab="趋势视图" key="2">
                        <div className={styles.topBox}>
                            <div style={{ width: 300 }}>
                                <span style={{ marginLeft: 10 }}>指标类型：</span>
                                <Select
                                    style={{ width: 220 }}
                                    placeholder="请选取"
                                    onChange={this.zblxhandleChange}
                                    size='small'
                                    value={this.state.zblx}
                                >
                                    <Option value="1">经济指标</Option>
                                    <Option value="2">物耗能耗指标 </Option>
                                    <Option value="3">单产单耗指标</Option>

                                </Select>
                            </div>


                            <div style={{ width: 600 }}>
                                <span style={{ marginLeft: 10 }}>时间选取：</span>
                                <DatePicker
                                    allowClear={false}
                                    locale={locale}
                                    disabledDate={this.disabledStartDate}
                                    showTime
                                    format="YYYY-MM"
                                    size="small"
                                    value={startValue}
                                    placeholder="开始时间"
                                    onChange={this.onStartChange}
                                    onOpenChange={this.handleStartOpenChange}
                                    style={{ width: 220, marginRight: 10, marginLeft: 5 }}
                                />

                                ~<DatePicker
                                    allowClear={false}
                                    locale={locale}
                                    disabledDate={this.disabledEndDate}
                                    showTime
                                    size="small"
                                    format="YYYY-MM"
                                    value={endValue}
                                    placeholder="结束时间"
                                    onChange={this.onEndChange}
                                    open={endOpen}
                                    onOpenChange={this.handleEndOpenChange}
                                    style={{ width: 220, marginRight: 10, marginLeft: 5 }}
                                />
                            </div>








                            <div style={{ width: 400 }}>
                                <span style={{ marginLeft: 10 }}>指标选取：</span>
                                <Select
                                    style={{ width: 270 }}
                                    maxTagCount={2}
                                    placeholder="请选取"

                                    maxTagTextLength={5}
                                    onChange={this.handleChange}
                                    size='small'
                                    value={this.state.selectData}
                                // dropdownRender={menu => (
                                //     <div>
                                //         {menu}
                                //         <Divider style={{ margin: '4px 0' }} />
                                //         <div
                                //             style={{ padding: '4px 8px', cursor: 'pointer' }}
                                //             onMouseDown={e => e.preventDefault()}
                                //             onClick={this.addItem}
                                //         >
                                //             <Icon type="plus" /> 更多
                                // </div>
                                //     </div>
                                // )}
                                >
                                    {
                                        zblxData.map((item) => {
                                            return (
                                                <Option value={item.value}>{item.label}</Option>
                                            )
                                        })
                                    }


                                </Select>
                            </div>
                            <Button size='small' style={{ marginLeft: 10 }} type="primary" onClick={this.getTrendViewData}>查询</Button>
                            <Button size='small' style={{ marginLeft: 10 }} >重置</Button>
                        </div>

                        <div style={{ height: containerHeight, overflow: 'auto', position: 'relative' }} className={styles.bottomBox}>
                            <div className={styles.title}>
                                <div style={{ display: 'flex', alignItem: 'center' }}><span className={styles.ciler}></span> 历史趋势图</div>
                            </div>
                            <Echarts_ONE series={this.state.series} time={this.state.time} />

                        </div>

                    </TabPane>

                </Tabs>
            </div>
        )
    }


}

export default connect()(Sjdbfx_Qnhb)